<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>尘跃的个人分享网——工具——在线HTTP请求</title>
    <meta name="author" content="尘跃" />
    <meta
        name="description"
        content="尘跃的个人分享网——工具——在线HTTP请求"
    />


    <!-- Facebook Open Graph -->
    <meta property="og:title" content="尘跃的个人分享网——工具——在线HTTP请求" />
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://cyue.net/pages/tool/http-request.html">
    <meta property="og:image" content="http://cyue.net/favicon.png" />
    <meta property="og:site_name" content="尘跃的个人分享网" />
    <meta
        property="og:description" 
        content="尘跃的个人分享网——工具——在线HTTP请求"
    />

    <!-- Twitter Cards -->
    <meta name=twitter:card content="summary" />
    <meta name=twitter:image content="http://cyue.net/favicon.png" />
    <meta name="twitter:title" content="尘跃的个人分享网——工具——在线HTTP请求" />
    <meta name=twitter:description content="尘跃的个人分享网——工具——在线HTTP请求" />
    <meta name="twitter:creator" content="@尘跃" />
    <meta name="twitter:site" content="@cyue.net" />


    <!-- style -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/style-fit.css">
    <link rel="stylesheet" href="/css/style-addon-nav.css">

    <!-- highlight -->
    <link rel="stylesheet" href="/css/third/highlight.min.css">
    <script src="/js/third/highlight.min.js"></script>

    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- Google ADS -->
    <meta name="google-adsense-account" content="ca-pub-7556556693775855">
    <script src="/js/ads.js"></script>

    <style>
        #app {
            display: flex;
            flex-direction: column;
            gap: 1em;
        }

        button,
        .button {
            margin-top: 5px;
        }

        .container-target {
            font-size: var(--font-size-large);
            display: flex;
            flex-direction: column;
            gap: 0.5em;
        }

        .container-target * {
            font-size: inherit;
        }


        .panel-data {
            background-color: rgba(176, 176, 40, 0.03);
            font-size: var(--font-size-small);
            border: 2px solid var(--color-primary);

            box-sizing: border-box;
            margin: auto;
            padding: 0.5em;
            width: 100%;
            min-height: 10rem;
            max-height: 20rem;

            overflow: auto;
            text-align: left;

            display: flex;
        }
        .panel-data > * {
            width: 100%;
        }
        @media (min-width: 45rem) {
            .panel-data {
                font-size: var(--font-size-medium);
            }
        }

        .panel-data-textarea {
            resize: none;
            background-color: #f3f3f3;
            width: 100%;

            box-sizing: border-box;
            padding: 0.5em;
            font-size: inherit;
        }
        .panel-data-textarea[disabled] {
            filter: brightness(0.95);
        }
    </style>

</head>
<body>
    
    <header>
        <div class="flex-row flex-items-center" style="flex: 1;;height: 100%;gap: 0.5rem;">
            <a class="icon" href="/index.html"></a>
            <h2 class="header-title">在线HTTP请求</h2>
        </div>
        <div class="wrapper-nav flex-row flex-items-center">
            <nav>
                <ul class="flex-column flex-items-center">
                    <li>
                        <a href="/pages/other.html">其他</a>
                    </li>
                    <li>
                        <a href="/pages/tool.html">工具</a>
                    </li>
                    <li>
                        <a href="/pages/sort.html">分类</a>
                    </li>
                    <li>
                        <a href="/pages/search.html">搜索</a>
                    </li>
                    <li>
                        <a href="/pages/about.html">关于</a>
                    </li>
                </ul>
            </nav>
        </div>
        
    </header>


    <main id="app">

        <div class="container-target">

            <div class="flex-row flex-items-center">
                <span>方法：</span>
                <select name="select-method" id="select-method">
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="PUT">PUT</option>
                    <option value="PATCH">PATCH</option>
                    <option value="DELETE">DELETE</option>
                </select>
            </div>
            
            <div class="flex-row flex-items-center flex-wrap">
                <span>URL：</span>
                <div class="flex-row flex-items-center" style="flex: 1;">
                    <input
                        type="url"
                        name=""
                        id=""
                        value=""
                        placeholder="http(s)://example.com"
                        pattern="http(s)?://.*"
                        style="flex: 1;"
                    >
                    <span style="margin-left: 5px;"></span>
                </div>
                <button onclick="clickRequest()" style="cursor: pointer;">请求</button>
            </div>
        </div>

        <div class="container-request">
            <h2>Request</h2>
            <div class="panel-data" placeholder="输入 JSON 文本">
                <textarea class="panel-data-textarea" name="" id="" disabled></textarea>
            </div>
        </div>

        <div class="container-response">
            <h2>Response</h2>
            <div class="panel-data">
                <pre><code style="max-height: 18rem;text-overflow: initial;"></code></pre>
            </div>
        </div>
    </main>


    <page-footer></page-footer>


    <!-- web component -->
    <script src="/js/component.js"></script>
    <!-- style -->
    <script src="/js/style.js"></script>

    <script src="/js/third/beautify-html.min.js"></script>
    <script src="/js/http.js"></script>
    <script src="/js/dialog.js"></script>
    <script>
        const selectElement = document.getElementsByTagName("select")[0];
        /** @type { HTMLInputElement } */
        const inputElement = document.querySelector("input[type=url]");
        const textareaElement = document.querySelector("textarea");
        const codeElement = document.querySelector("code");
        
        selectElement.addEventListener("change", (e) => {
            if (selectElement.value === "GET") {
                textareaElement.disabled = true;
            } else {
                textareaElement.disabled = false;
            }
        });


        function clickRequest()
        {
            const url = inputElement.value;
            if (!url)
            {
                alert("请求URL为空");
                return;
            }
            if (!inputElement.checkValidity())
            {
                alert("URL不合法");
                return;
            }


            let data = {};
            try {
                if (selectElement.value !== "GET")
                    data = JSON.parse(textareaElement.value);
            } catch (e) {
                alert("JSON格式错误");
                return;
            }


            const serverRequest = () => {
                HTTP.request({
                    method: "POST",
                    url: "/api/tool/http",
                    data: {
                        method: selectElement.value,
                        url: url,
                        data: data
                    }
                }).then(async response => {
                    // cyue.net 的 response
                    const result = response.data;
                    if (result.type === "success")
                    {
                        let finalResult = undefined;
                        if (result.data instanceof Object)
                            finalResult = JSON.stringify(result.data, null, "  ");
                        else if (typeof result.data === "string")
                            finalResult = result.data.replaceAll("<", "&lt").replaceAll(">", "&gt");
                        else
                            finalResult = result.data;

                        codeElement.className = "";
                        codeElement.innerHTML = finalResult;
                        (async () => hljs.highlightAll())();
                    }
                    else {
                        const errorString = JSON.stringify(result.data, null, "  ");
                        Dialog.window(errorString);
                    }
                }).catch(e => {
                    console.error(e);
                });
            };

            if (/(Android)/i.test(navigator.userAgent) || (url.includes("https") && url.includes("cyue.net")))
            {
                HTTP.request({
                    method: selectElement.value,
                    url: url,
                    data: data
                }).then(async response => {
                    // 某网站的 response
                    const result = response.data;
                    let finalResult = undefined;
                    if (result instanceof Object)
                        finalResult = JSON.stringify(result, null, "  ");
                    else if (typeof result === "string")
                        finalResult = result.replaceAll("<", "&lt").replaceAll(">", "&gt");
                    else
                        finalResult = result;

                    codeElement.className = "";
                    codeElement.innerHTML = finalResult;
                    (async () => hljs.highlightAll())();
                    
                }).catch(e => {
                    console.error(e);

                    let errorString = e;
                    if (e instanceof Object)
                        errorString = JSON.stringify(e, null, "  ");
                    Dialog.window(errorString);
                    
                    serverRequest();
                });
            }
            else
            {
                serverRequest();
            }
            
            
        }
    </script>
</body>
</html>


